Balises sémantiques
Les balises sémantiques sont des balises apportant de l'information aux contenus.
<!-- Cette balise par exemple indique que le mot "mot" est important dans ce texte -->
Ce <strong>mot</strong> est important
La plupart des balises sémantiques ont des affichages spécifiques comme la balise strong qui met en gras (ça dépend d'un navigateur à l'autre), cependant cette mise en forme n'est pas du tout importante.
On ne doit jamais choisir une balise par rapport au visuel, mais par rapport à l'information sémantique qu'elle apporte au texte ! (en gros on utilise pas la balise strong juste parcequ'elle met en gras et qu'on souhaitait mettre en gras.)
Grâce au CSS, le visuel d'une balise pourra être modifié à notre convenance sans impacter la sémantique des contenus.
La balise paragraphe
Sémantiquement, la balise <p></p> permet de créer un paragraphe de texte normal.
<p>Ceci est un paragraphe de texte.</p>
Pour revenir à la ligne dans un même paragraphe, on utilise la balise br :
<p>Première ligne<br>Deuxième ligne</p>
Les titres h1 à h6
Pour hiérarchiser les contenus de la page web, on utilise les titre h1 à h6 :
<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
Il existe quelques règles à respecter avec ces titres :
- Il ne doit y avoir qu'un seul titre h1 par block sémantique (et non par page comme on le voit souvent)
- Le choix du niveau de titre se fait en fonction de la hiérarchie et non pour le visuel (CSS pourra changer ça plus tard)
<!-- Exemple de structure correcte -->
<h1>Titre principal</h1>
<h2>Premier sous-titre</h2>
<p>lorem ipsum...</p>
<h2>Deuxième sous-titre</h2>
<h3>Sous-partie 1</h3>
<p>lorem ipsum...</p>
<h3>Sous-partie 2</h3>
<p>lorem ipsum...</p>
Quelques balises sémantiques communes
<!-- Indique un texte différencié du texte principal (termes techniques, mots en langue étrangère, etc...) -->
<i>texte</i>
<!-- Indique un texte qui est stylistiquement différent du reste du texte (mots avec des fautes d'orthographes par exemple) -->
<u>texte</u>
<!-- Indique une attention particulière sur un texte sans apporter d'importance pour autant -->
<b>texte</b>
<!-- Indiquer une emphase (accentuation du texte) -->
<em>texte</em>
<!-- Indique un texte important -->
<strong>texte</strong>
<!-- Indique un texte surligné à cause de sa pertinence dans le contexte (mot recherché via un formulaire par exemple) -->
<mark>texte</mark>
<!-- Indique que le texte est le titre d'une oeuvre (livre, film, etc...) -->
<cite>texte</cite>
<!-- Indique que le texte est un moyen de contact (adresse, tel, URL, etc...) -->
<address>texte</address>
<!-- Met le texte en indice pour des besoins typographiques (comme l'écriture d'éléments dans une formule mathématique par exemple) -->
<sub>texte</sub>
<!-- Met le texte en exposant. (idem que pour la balise "sub") -->
<sup>Texte</sup>
<!-- Traduit un texte en une date précise pour les agents utilisateurs (Google par exemple) -->
<time datetime="2026-05-04">lundi prochain</time>
<!-- Indique que le texte est une citation en incise (citation dans une phrase). -->
<!-- l'attribut "cite" permet d'indiquer la source de la citation -->
<q cite="https://xxxxx">texte</q>
<!-- Balise autofermante servant à faire une rupture sémantique entre deux paragraphes. (changement de sujet par exemple) -->
<hr>
<!-- Indique qu'un paragraphe est une citation longue. -->
<!-- l'attribut "cite" permet d'indiquer la source de la citation -->
<blockquote cite="https://xxxxx">
<p>Citation longue</p>
</blockquote>